<template>
  
  <div class="tubiao">
    <div class="bei">
          <div class="top">
              <span>学生信息可视化图标</span>
          </div>
          <div id="zhuzhuangtu">
              <div class="zhuzhuangtu1"></div>
              <div class="zhuzhuangtu2"></div>
              <div class="zhuzhuangtu3"></div>
              <div class="zhuzhuangtu4"></div>
          </div>
          <div id="cricletu">

          </div>
          
          
          <div id="nanDingCitiFenBu">

          </div>
          <div id="zhexiantu">

          </div>
          <div id="maptubj">

            <div id="maptu">


              </div>
          </div>
    </div>

  </div>
</template>

<script>
// import * as echarts from 'echarts';

import echarts from 'echarts' // 引入echarts中国地图数据
require('echarts/map/js/china')

// require('echarts');
// require('echarts/extension/bmap/bmap');
export default {
    data(){
        return{
          // 柱状图
           zhuzhuangtu : {
              color: ['#5196cb'],
              title: {
                  text: '年龄分布',
                  left: "35%",
                   textStyle:{
                     color:'#ffffff'
                   }
                },
              // legend: {
              //   y:'55%',
              //   textStyle:{
              //         fontSize: 18,//字体大小
              //         color: '#ffffff'//字体颜色
              //       },
              //   data: []
              // },
              xAxis: {
                type: 'category',
                data: ['15~17', '18~20', '21~23', '24~27', '28~30'],
                axisLabel: {
                            interval:0,
                            rotate:30,
                            show: true,
                            textStyle: {
                                color: '#ffffff'
                            }
                }
              },
              yAxis: {
                type: 'value',
                 axisLabel : {
                            textStyle: {
                                color: '#ffffff'
                            }
                        }
              },
              series: [
                {
                  data: [120, 200, 150, 80, 70],
                  type: 'bar'
                }
              ]
            },
          // 环形图
          cricletu :{
              color: ['#fc5531','#64d9d6'], 
                title:{
                    text:'男女比例',
                    textStyle:{
                      color:'#ffffff'
                    }
                },
                textStyle:{
                    color:'#ffffff'
                },
                  tooltip: {
                    trigger: 'item'
                  },
                  legend: {
                    left: 'center',
                    textStyle:{
                            fontSize: 18,//字体大小
                            color: '#ffffff'//字体颜色
                          },
                  },
                  series: [
                    {
                      name: 'Access From',
                      type: 'pie',
                      radius: ['40%', '70%'],
                      avoidLabelOverlap: false,
                      label: {
                        show: false,
                        position: 'center'
                      },
                      emphasis: {
                        label: {
                          show: true,
                          fontSize: '40',
                          fontWeight: 'bold'
                        }
                      },
                      labelLine: {
                        show: false
                      },
                      data: [
                        { value: 735, name: '女' },
                        { value: 300, name: '男' }

                      ]
                    }
                  ]
                },
          // 折线图
          zhexiantu : {
                title:{
                  left:'35%',
                  text:'学历分布',
                  textStyle:{
                      color:'#ffffff'
                  }
                },
                xAxis: {
                  type: 'category',
                  data: ['初中', '高中', '专科', '本科'],
                  axisLabel:{
                      textStyle:{
                      color:'#ffffff'
                    }
                  }
                },
                yAxis: {
                  type: 'value',
                  axisLabel:{
                      textStyle:{
                      color:'#ffffff'
                    }
                  }
                },
                series: [
                  {
                    data: [150, 230, 224, 218],
                    type: 'line'
                  }
                ]
              },
          // 南丁格尔
          nanDingCitiFenBu : {
                title: {
                  text: '地区分布',
                  left: "35%",
                   textStyle:{
                     color:'#ffffff'
                   }
                },
                legend: {
                  top: 'bottom',
                  textStyle:{
                    color:'#ffffff'
                  }
                },
                toolbox: {
                  show: true,
                  feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                  }
                },
                series: [
                  {
                    name: 'Nightingale Chart',
                    type: 'pie',
                    radius: [20, 80],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                      borderRadius: 8
                    },
                    data: [
                      { value: 40, name: 'rose 1' },
                      { value: 38, name: 'rose 2' },
                      { value: 32, name: 'rose 3' },
                      { value: 30, name: 'rose 4' },
                      { value: 28, name: 'rose 5' },
                      { value: 26, name: 'rose 6' },
                      { value: 22, name: 'rose 7' },
                      { value: 18, name: 'rose 8' }
                    ]
                  }
                ]
              },

            // map
            mapOpen : { 
               

              tooltip: { // 鼠标移到图里面的浮动提示框
              // formatter详细配置： https://echarts.baidu.com/option.html#tooltip.formatter
                formatter (params, ticket, callback) { 
                  // params.data 就是series配置项中的data数据遍历
                  let localValue,
                    perf,
                    downloadSpeep,
                    usability,
                    point
                  if (params.data) {
                    localValue = params.data.value
                    perf = params.data.perf
                    downloadSpeep = params.data.downloadSpeep
                    usability = params.data.usability
                    point = params.data.point
                  } else { // 为了防止没有定义数据的时候报错写的
                    localValue = 0
                    perf = 0
                    downloadSpeep = 0
                    usability = 0
                    point = 0
                  }
                  // 性能perf：${perf}<br/>
                  //     下载速度downloadSpeep：${downloadSpeep}<br/>
                  //     可用性usability：${usability}<br/>
                  //     监测点数point：${point}<br/>
                  let htmlStr = `
                    <div style='font-size:18px;'> ${params.name}</div>
                    <p style='text-align:left;margin-top:10px;'>
                      区域对应人数：${localValue}<br/>
                    </p>
                  `
                  return htmlStr
                },
                // backgroundColor:"#ff7f50",//提示标签背景颜色
                // textStyle:{color:"#fff"} //提示标签字体颜色
              }, 
              // visualMap的详细配置解析：https://echarts.baidu.com/option.html#visualMap
              visualMap: { // 左下角的颜色区域
                type: 'piecewise', // 定义为分段型 visualMap
                min: 0,
                max: 1000,
                // itemWidth: 40,
                // bottom: 60,
                // left: 20,
                pieces: [ // 自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
                  {gt: 900, label: '>900', color: '#6ad86e'}, // (900, 1000]
                  {gt: 500, lte: 900, label: '500~900', color: '#9adcfa'}, // (500, 900]
                  {gt: 310, lte: 500, label: '310~500', color: '#ffeb3b'}, // (310, 500]
                  {gt: 200, lte: 300, label: '2~300', color: '#ff9800'}, // (200, 300]
                  {gt: 1, lte: 200, label: '1~200', color: 'orangered'}, // (10, 200]
                  {value: 0, label: '无', color: '#999'} // [0]
                ],
                textStyle: {
                    color: '#ffffff'
                  },
              },
              
              // geo配置详解： https://echarts.baidu.com/option.html#geo
              geo: { // 地理坐标系组件用于地图的绘制
                map: 'china', // 表示中国地图
                // roam: true, // 是否开启鼠标缩放和平移漫游
                zoom: 1.2, // 当前视角的缩放比例（地图的放大比例）
                label: {
                  show: true
                },
                itemStyle: { // 地图区域的多边形 图形样式。
                  borderColor: 'rgba(0, 0, 0, 0.2)',
                  emphasis: { // 高亮状态下的多边形和标签样式
                    shadowBlur: 20,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              },

              series: [
                {
                  name: '', // 浮动框的标题（上面的formatter自定义了提示框数据，所以这里可不写）
                  type: 'map',
                  geoIndex: 0,
                  label: {
                    show: true,
                  },
                  // 这是需要配置地图上的某个地区的数据，根据后台的返回的数据进行拼接（下面是我定义的假数据）
                  data: [{
                    'name': '北京',
                    'value': 599,
                    'perf': '0.501s', // 性能
                    'downloadSpeep': '1.221MB/s', // 下载速度
                    'usability': '100%', // 可用性
                    'point': '250' // 监测点
                  }, {
                    'name': '上海',
                    'value': 142
                  }, {
                    'name': '黑龙江',
                    'value': 44
                  }, {
                    'name': '新疆',
                    'value': 999,
                    'perf': '0.501s', // 性能
                    'downloadSpeep': '1.221MB/s', // 下载速度
                    'usability': '100%', // 可用性
                    'point': '250' // 监测点
                  }, {
                    'name': '深圳',
                    'value': 92
                  }, {
                    'name': '湖北',
                    'value': 810
                  }, {
                    'name': '四川',
                    'value': 453
                  }]
                }
              ]
            }
          }
            



            
        },
        mounted(){
          this.getSex()
          this.getXl()
          this.getAge()
          this.getMap()
          this.getNanDing()
          
          
         

        



        },
        methods:{
          async getSex(){
              var res=await this.http.get('student/sexchart/')
              this.cricletu.series[0].data=res.data.data
              // 环形图
              var myChart = echarts.init(document.getElementById('cricletu'));
              myChart.setOption(this.cricletu);
          },
          async getXl(){
              var res=await this.http.get('student/degchart/')
              this.zhexiantu.series[0].data=res.data.data
              // console.log(this.cricletu.series[0].data);
              // 环形图
              var myChart = echarts.init(document.getElementById('zhexiantu'));
              myChart.setOption(this.zhexiantu);
          },
          async getAge(){
              var res=await this.http.get('student/agechart/')
              this.zhuzhuangtu.series[0].data=res.data.data
              // console.log(this.cricletu.series[0].data);
              //柱状图
              var myChart = echarts.init(document.getElementById('zhuzhuangtu'));
              myChart.setOption(this.zhuzhuangtu);
          },
           async getMap(){
              var res=await this.http.get('student/mapchart/')
              this.mapOpen.series[0].data=res.data.data
              // console.log(this.mapOpen.series[0].data);
               // map图
              // 初始化echarts实例
              //   this.chinachart = echarts.init(document.getElementsByClassName('china_map'))
              var myChart = echarts.init(document.getElementById('maptu'));
              // 进行相关配置
              // 使用刚指定的配置项和数据显示地图数据
              myChart.setOption(this.mapOpen)
          },
          async getNanDing(){
              var res=await this.http.get('student/mapchart/')
              this.nanDingCitiFenBu.series[0].data=res.data.data
              console.log(this.mapOpen.series[0].data);

              // 南丁格尔图
              var myChart = echarts.init(document.getElementById('nanDingCitiFenBu'));
              myChart.setOption(this.nanDingCitiFenBu);
          },

        },
        created(){
          
        }

}
</script>

<style scoped>

#zhuzhuangtu{
  height: 280px;
  width: 350px;
  position: absolute;

  background: url('./image/line(1).png') no-repeat rgba(255, 255, 255, 0.05);
  background-size: 100% 100%;
}

#cricletu{
  height: 280px;
  width: 350px;
  position: absolute;
  right: 0;
  background: url('./image/line(1).png') no-repeat rgba(255, 255, 255, 0.05);
  background-size: 100% 100%;
  /* background-color: rgb(20, 225, 167); */
}

#zhexiantu{
  height: 280px;
  width: 350px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: url('./image/line(1).png') no-repeat rgba(255, 255, 255, 0.05);
  background-size: 100% 100%;
  /* background-color: rgb(215, 13, 222); */
}

#nanDingCitiFenBu{
  height: 280px;
  width: 350px;
  position: absolute;
  right: 0;
  bottom: 0;
  background: url('./image/line(1).png') no-repeat rgba(255, 255, 255, 0.05);
  background-size: 100% 100%;
  /* background-color: rgb(215, 13, 222); */
}
#maptu{
  /* width: 550px;
  height: 410px;
  left: 365px;
  top: 140px;\
  position: absolute;
  background: url(/static/img/map.bab2b509.png) no-repeat 43px;
  background-size: 78% 100%; */
  width: 420px;
  height: 400px;  
  left: 41px;
  top: 23px;
}

#maptubj{
  width: 550px;
  height: 410px;
  left: 350px;
  top: 140px;
  position: absolute;
  background-color: red;
  background: url('./image/map.png') no-repeat 43px;
  background-size: 78% 100%;
}
.top{
  background-color: red;
  /* position: relative; */
  height: 50px;
  background: url('./image/head_bg.png') no-repeat top center;
  background-size: 100% 100%;

}
.top span{
  color: white;
  line-height: 50px;
}
.bei{
  position: relative;
  height: 669px;
  background: url('./image/bg.jpg') no-repeat top center;
  background-size: 100% 100%;
  text-align: center;
}
</style>



